<template>
  {{ user.userid }}
  <van-nav-bar
    title="京东登录"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <!-- 表单模块 -->
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="loginname"
        name="loginname"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },

          { pattern, message: '请输入正确的用户名2-15位' },
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },

          { pattern, message: '请输入正确的密码2-8位' },
        ]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

  <van-cell-group title="注册">
    <van-cell title="注册" is-link to="/register" />
  </van-cell-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { getLogin } from '@/apis/user'

import { useUserStore } from '@/store/userStore'

import { useRouter } from 'vue-router'

const onClickLeft = () => history.back()

const loginname = ref('')
const password = ref('')

const pattern = /^.{2,15}$/

const user = useUserStore()
const router = useRouter()

const onSubmit = async (values) => {
  console.log('submit', values)
  // 1  提交 获取 输入的用户名和密码
  // 2  发送请求
  // 3   判断请求是否成功
  // 4  成功后存储用户的id  或者用户名    然后跳转到首页

  let res = await getLogin(values)
  // console.log(res.data.userid)
  if (res.data?.userid) {
    user.setUserId(res.data.userid)
    router.push('/')
  }
}
</script>

<style scoped lang="scss">
// https://juejin.cn/post/7090570269495918599 (vue 样式穿透的集中形式)

//   框架里面的样式
//   1  组件名就是样式名
//   2  如果要更改组件里面的样式 的 加上   :deep  表示样式穿透
//  :deep(.van-nav-bar__title)  固定写法
.van-nav-bar {
  :deep(.van-nav-bar__title) {
    font-size: 14px;
    color: red;
  }
  :deep(.van-nav-bar__left) {
    font-size: 14px;
  }
  :deep(.van-nav-bar__text) {
    color: red;
  }
  :deep(.van-nav-bar__arrow) {
    color: red;
  }
}
</style>
